// 头部
@import'base';
.jz{ //居中
    width: 1250px;
    margin: auto;
    // border: 1px solid black;
}
// 头部
.log{  
    box-sizing: border-box;  
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    display: flex;
    
    .fz{
        width:200px; 
        height: 40px;
        /* border: 1px solid cadetblue; */
        float: left;
        line-height: 40px;
        a{
            font-size: 13px;
            color: #666666;
            &:hover{
                color: red;
            }
        }
    }
    .fy{
        width: 605px;
        height: 40px;
        float: right;
        a{
            font-size: 13px;
            margin: 0 14px;
            line-height: 40px;
            color: #666666;
            &:hover{
                color: red;
            }
        }
    }
}
// 这是第二段婚礼纪
.twoStage{
    background-color: #ffffff;       
    height: 80px;
    .zz{
        width: 245px;
        height: 100px;
        float: left;
        h1{
            display: block;              
            width: 117px;
            height: 100px;
            background: url(/images/hunliji.png) 10px no-repeat;
            background-size: 70%;
            text-indent: -999px;
            float: left;
        }
        a{
            margin-top: 40px; 
            font-size: 13px; 
            line-height: 100px;
            color:black;
            &:hover{
                color: red;
            }
        }
    }
    ul{      
        li{                
            .xhx{
                border-bottom: 3px solid red;
                width: 80px;
            }
            position: relative;
            width: 105px;
            float: left;
            text-align: center;  
            .qj{
                background:url(/images/hh.png)no-repeat 48px 18px;
                background-size: 35%;
                &:hover{
                    border-bottom: 0;
                }
            }
            .three{
                width: 0;
                height: 0;
                border-top: 4px solid black;
                border-right: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 4px solid transparent;
                position: absolute;
                top: 49px;
                right: 10px;
                transform-origin: center 2px;
                transition: transform .5s;
            }
            &:hover .three{
                transform: rotate(180deg);
                border-top: 4px solid red;        
            }
            a{
                color: black;
                display: block;
                height: 80px;
                line-height: 100px;
               &:hover{
                color: crimson;
                border-bottom: 2px solid red;
            
               } 
            }   
            &:hover{
                .reds-i{
                    z-index: 11;
                    opacity: 1;
                }
              
            }
              // 隐藏的ul列表
               .reds-i{
               position: absolute;
              z-index: 0;
               opacity: 0;
               transition: all .5s;
               li{    
                  background-color: #ffffff;                         
                   a{
                    color: black;
                    display: block;
                    height: 50px;
                    line-height: 50px;
                   }
                   :hover{
                    color: red;
                    border-bottom: 0px;
                   }
               }
           }
          
        }
    // *       
    }
    .yozb{
        width: 230px;
        height: 100px;
        float: left;
        display: flex;
        justify-content: center;
        position: absolute;
        right: 148px;
        input{
            width: 180px;
            height: 40px;
            margin-top: 30px;
            background: #f5f5f5;
        }
        a{
            margin-top: 30px;
        }
    }
    
}
// 固定框
.twoStage-fix{
  position: absolute;
  top: -999px;
//   transition: all 0.5s;
  background-color: #ffffff;   
    height: 80px;
    .zz{
        width: 245px;
        h1{
            display: block;              
            width: 117px;
            height: 100px;
            background: url(/images/hunliji.png) 8px 18px no-repeat;
            background-size: 70%;
            text-indent: -999px;
            float: left;
        }
        a{
            font-size: 13px; 
            line-height: 70px;
            color:black;
            &:hover{
                color: red;
            }
        }
    }
   .yozb{
      margin-top: -48px;
      text-align: center;
      .inp{
          width: 432px;
          height: 37.5px;
          border: 1px solid #333333;
          border-right: none;
          background-color: #cccccc;
      }
      a{
          border:none;
          margin-left: -5px;
      }
   }
   
    
    
}
// 置顶
.toTop{
    position: fixed;
    right: 0;
    top: 55%;
    width: 56px;
    height: 56px;
    background-color: black;
    z-index: 999;
    text-align: center;
    img{
        width: 26px;
        height: 26px;
    }
    a{
        color: #ffffff;
    }
}
// 广告
.liumang{
    display: none;
    width: 100px;
    height: 100px;
    position: fixed;
    right: 152px;
    bottom: 150px;
    z-index: 999;
    transition: all 1s;
    cursor: pointer;
    .saccs{
        width: 250px;
        height: 250px;
    }  
    .s{
        font-size: 30px;
        position: absolute;
        top: -20px;
        left: -20px;
        width: 40px;
        text-align: center;
        background-color: #cccccc;
        opacity: 0.2;
    }
}